<template>
  <div id="app" class="bg-gray95">
    <div class="row">
      <div class="dis-ib tabGroup">
        <template v-for="(v, i) in tab">
          <span
            :key="i"
            :class="['tab', v.isActive ? 'active' : '']"
            @click="link(v)"
            >{{ v.txt }}</span
          >
        </template>
      </div>
      <div class="dis-ib">
        <button type="button" class="btn fz12" @click="showAxiosHistroy">
          <i class="fa fa-bug"></i>
        </button>
        <el-drawer
          :visible.sync="axiosHistroy.visible"
          direction="rtl"
          width="640px"
        >
          <template v-for="(v, i) in axiosHistroy.histroy">
            <div class="pc-p5" :key="i">
              <div class="fz12">
                time:{{ $moment(v.time).format("MM-D-YYYY, HH:mm:ss") }}<br />
                <b>{{ v.method }}</b
                >//url:{{ v.url }}
              </div>
              <div class="fz12 ball">params:{{ JSON.stringify(v.params) }}</div>
            </div>
          </template>
        </el-drawer>
      </div>
    </div>
    <router-view class="tabContent" /><!--主体位置-->
    <template v-if="isDev">
      <el-button @click="drawer = true" type="primary"> 备忘面板 </el-button>
      <el-drawer
        :visible.sync="drawer"
        direction="ltr"
        :before-close="handleClose"
      >
        <div @click="test()">$store</div>
        <div @click="test('loginInfo')">loginInfo-使用者相关信息</div>
        <div @click="test('postParams')">postParams-可用参数</div>
        <div @click="test('platform_app')">platform_app-左侧工作台树结构</div>
        <div @click="test('customerList')">
          customerList-中间客户列表和分页情况
        </div>
        <div @click="test('cusInfo')">cusInfo-抽屉用客户信息</div>
        <div @click="test('conditional')">
          conditional-条件组，现在不知道有没有在用的
        </div>
      </el-drawer>
    </template>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState([
      "loginInfo",
      "postParams",
      "platform_app",
      "customerList",
      "cusInfo",
      "conditional",
    ]),
  },
  data: () => {
    return {
      isDev: process.env.NODE_ENV == "development",
      drawer: false,
      message: "",
      tab: (() => {
        let arr = [
          // {isActive:true,txt:'test',path:'/test'},
          { isActive: true, txt: "客户聊天", path: "/" },
          // {isActive:false,txt:'工作台群发',path:'/workbenchSend'},
          // {isActive:false,txt:'APP客服聊天',path:'/AppCSchat'},
          // {isActive:false,txt:'留痕报备',path:'/Reporting'},
          // {isActive:false,txt:'标签关联',path:'/AboutLabel'},
          // {isActive:false,txt:'群发消息记录',path:'/MassMsgRrecord'},
        ];
        if (process.env.NODE_ENV == "development") {
          arr.push({ isActive: false, txt: "test", path: "/test" });
        }
        return arr;
      })(),
      urlArgs: null,
      axiosHistroy: {
        visible: false,
        histroy: [],
      },
    };
  },
  methods: {
    handleClose: function (done) {
      done();
    },
    test: function (str) {
      if (str) {
        console.log(str, this[str]);
      } else {
        console.log(this.$store);
        // console.log(this.$store.getters["loginInfo/getCEID"]);
      }
      if (str == "postParams") {
        // console.table(this.postParams.DICT_IM_TAG);
      }
    },
    link: function (item) {
      this.tab.forEach((v) => {
        v.isActive = v == item;
      });
      this.$router.push(item.path);
    },
    showAxiosHistroy() {
      if (this.axiosHistroy.visible) {
        this.axiosHistroy.histroy.splice(0, this.axiosHistroy.histroy.length);
      } else {
        this.$axiosHistroy.forEach((v) => {
          this.axiosHistroy.histroy.push(v);
        });
      }
      this.axiosHistroy.visible = !this.axiosHistroy.visible;
    },
  },
  beforeCreate: function () {},
  created: function () {
    this.urlArgs = this.$qs.parse(window.location.search, {
      ignoreQueryPrefix: true,
    });
    let ceid = this.$_.get(this.urlArgs, "companyEmployeeId", 0);
    this.$store.dispatch("loginInfo/updata", { ceid: ceid }).then((res) => {
      this.isDev && console.log("身份数据返回");
    });
    this.$store.dispatch("postParams/init_DICT_IM_TAG").then((res) => {
      this.isDev && console.log("IM系统标签池返回");
    });
    this.$store
      .dispatch("postParams/init_FROMSOURCES", { ceid: ceid })
      .then((res) => {
        this.isDev && console.log("IM资源渠道返回");
      })
      .catch((err) => {
        console.error(err);
      });
    this.$store
      .dispatch("postParams/init_crmProducts", { ceid: ceid })
      .then((res) => {
        this.isDev && console.log("Crm产品列表返回");
      });
    this.$store.dispatch("platform_app/init", { ceid: ceid }).then((res) => {
      this.isDev && console.log("平台&应用数据返回");
    });
    this.$store.dispatch("customerList/init", { ceid: ceid }).then((res) => {
      this.isDev && console.log("用户列表初始化数据返回");
    });
  },
  beforeMount: function () {},
  mounted: function () {},
  beforeUpdate: function () {},
  updated: function () {},
  beforeDestroy: function () {},
  destroyed: function () {},
};
</script>

<style src="@/assets/appTab.css"></style>
